<template>
  <n-modal
    v-model:show="getProps.modalData.show"
    class="custom-card"
    preset="card"
    :style="{ width: '800px' }"
    :title="title"
    :bordered="false"
    :segmented="{
      content: true,
      footer: true
    }"
    :mask-closable="false"
  >
    <n-form ref="formRef" :model="form" label-placement="left" :label-width="120" :rules="rules">
      <n-form-item label="部门名称：" path="departmentName">
        <n-input v-model:value="form.departmentName" style="width: 400px" />
      </n-form-item>
      <n-form-item label="上级部门：" path="parentId">
        <n-tree-select
          v-model:value="form.parentId"
          style="width: 400px"
          :options="departmentList"
          key-field="id"
          label-field="departmentName"
          clearable
        />
      </n-form-item>
    </n-form>

    <template #footer>
      <n-space justify="end">
        <n-button @click="handleClose">取消</n-button>
        <n-button type="primary" :loading="loading" @click="handleSave">确定</n-button>
      </n-space>
    </template>
  </n-modal>
</template>

<script setup lang="ts">
  import {
    NModal,
    NForm,
    NFormItem,
    NSelect,
    NInput,
    NSpace,
    NButton,
    FormValidationError,
    NText,
    NTreeSelect
  } from 'naive-ui'
  import { useStore } from '@/store'
  import { onMounted, reactive, ref } from 'vue'
  const store = useStore()
  const emits = defineEmits(['success'])
  const props = defineProps({
    modalData: {
      type: Object,
      default: () => ({})
    }
  })

  const getProps = reactive(props)
  const loading = ref(false)
  const formRef = ref(null)
  const form = ref({
    departmentName: null,
    parentId: null
  })

  const rules = reactive({
    departmentName: { type: 'string', required: true, message: '请输入部门名称', trigger: 'blur' },
    parentId: { type: 'number', required: true, message: '请选择上级部门', trigger: 'change' }
  })
  const title = '基本信息'
  const departmentList = ref([])
  onMounted(() => {
    getDepartmentList()
    if (props.modalData.type === 'edit') {
      getDetail()
    }
  })
  const getDepartmentList = async () => {
    const { data } = await store.dispatch('system/departmentList')
    departmentList.value = [data]
  }

  async function getDetail() {
    form.value = getProps.modalData.row
  }

  function handleClose() {
    getProps.modalData.show = false
  }

  function handleSave() {
    formRef.value?.validate(async (errors: Array<FormValidationError>) => {
      if (!errors) {
        await submitData()
      } else {
        console.log(errors)
      }
    })
  }

  async function submitData() {
    loading.value = true
    const { data } = await store
      .dispatch('system/departmentSave', {
        id: props.modalData.type === 'edit' ? props.modalData.row.id : null,
        departmentName: form.value.departmentName,
        parentId: form.value.parentId
      })
      .finally(() => {
        loading.value = false
      })
    emits('success', data)
    getProps.modalData.show = false
  }
</script>

<style scoped lang="scss"></style>
